<template>
    <view class="c-content">
        <view class="close-box" @click="close">
            <image src="../../static/images/close-01.png"></image>
        </view>
        <view class="c-info">
            <view class="client-img">
                <image
                    :src="
                        customer_info && customer_info.avatar
                            ? customer_info.avatar
                            : goodsImg
                    "
                    mode="scaleToFill"
                ></image>
            </view>
        </view>
        <view class="i-info">
            <view class="i-name">{{
                customer_info && customer_info.name
                    ? " " + customer_info.name
                    : " "
            }}</view>
            <view class="b-shopname">{{
                customer_info && customer_info.company
                    ? " " + customer_info.company
                    : " "
            }}</view>
            <!-- <view class="b-shopname">{{address && address.addressee ? address.addressee : ' '}}</view> -->
            <view class="b-phone">{{
                address && address.cellphone ? " " + address.cellphone : " "
            }}</view>
            <!-- <view class="b-adress">{{address && address.address ? address.address + ' ' : ' '}}</view> -->
        </view>
        <view class="i-a-info">
            <view>
                <text class="i-title">发货方式：</text>
                <text>{{
                    orderInfoData && orderInfoData.shipp_title
                        ? orderInfoData.shipp_title
                        : ""
                }}</text>
            </view>
            <view>
                <text class="i-title">收货人：</text>
                <text>{{
                    customer_info && customer_info.name
                        ? " " + customer_info.name
                        : " "
                }}</text>
            </view>
            <view>
                <text class="i-title">联系电话：</text>
                <text>{{
                    address && address.cellphone ? " " + address.cellphone : " "
                }}</text>
            </view>
            <view>
                <text class="i-title">送货地址：</text>
                <text
                    >{{ address && address.district ? address.district : ""
                    }}{{
                        address && address.address ? address.address + " " : " "
                    }}</text
                >
            </view>
        </view>

        <view class="i-b-info">
            <view>
                <text class="i-title">归属门店：</text>
                <text>{{
                    orderInfoData && orderInfoData.shop
                        ? orderInfoData.shop
                        : " 暂无"
                }}</text>
            </view>
            <view>
                <text class="i-title">经手人：</text>
                <text
                    >{{
                        orderInfoData && orderInfoData.uname_cp
                            ? orderInfoData.uname_cp
                            : " 暂无"
                    }}
                </text>
            </view>
            <view>
                <text class="i-title">打印次数：</text>
                <text>{{ orderInfoData && orderInfoData.print }}次</text>
            </view>
            <view>
                <text class="i-title">单据备注：</text>
                <text class="note" v-if="newNoteArr && newNoteArr.length > 0">
                    <text>备注(共{{ newNoteArr.length }}条)</text>
                    <text class="more" @click="SetShowNote">更多>></text>
                </text>
                <text v-else class="note" @click="SetShowNote">
                    <text>暂无备注</text>
                    <text class="more" @click="SetShowNote">更多>></text>
                </text>
            </view>
        </view>

        <view class="i-m-info" v-if="false">
            <view>
                <text class="i-title">收款记录：</text>
                <text class="note"><text class="more">查看详情</text></text>
            </view>
            <view>
                <text class="i-title">操作记录：</text>
                <text class="note"><text class="more">查看详情</text></text>
            </view>
        </view>
    </view>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
export default {
    props: ["orderInfoData", "customer_info", "address", "newNoteArr"],
    data() {
        return {
            goodsImg: staticConst.GOOD_IMG,
            showNote: false,
        };
    },
    methods: {
        SetShowNote() {
            this.$emit("openNoteMask");
        },

        close() {
            this.$emit("showCustmInfo");
        },
    },
};
</script>

<style lang="scss">
.c-content {
    width: 310px;
    height: 100%;
    position: relative;
    background: #f9f9f9;
    .close-box {
        width: 15px;
        height: 15px;
        padding: 3px;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
        image {
            width: 100%;
            height: 100%;
        }
    }

    .close-box:hover {
        background-color: #eee;
        opacity: 0.9;
    }
    .close-box:active {
        background-color: #ddd;
        opacity: 0.8;
    }

    .c-info {
        width: 100%;
        height: 220px;
        align-items: center;
        justify-content: center;
        display: flex;
        text-align: center;
        padding-top: 20px;
        .client-img {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
    .i-info {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ececec;
        font-size: 16px;
        .i-name {
            text-align: center;
            font-size: 26px;
            font-weight: bold;
            color: #333;
        }

        .b-shopname,
        .b-phone,
        .b-adress {
            text-align: center;
            color: #999;
        }
        .b-adress {
            color: #333;
        }
    }

    .i-c-info {
        text-align: center;
        padding: 10px;
        border-bottom: 1px solid #ececec;
        color: #999;
        font-size: 16px;
        text {
            color: #333;
        }
    }

    .i-a-info,
    .i-b-info,
    .i-m-info {
        // text-align: center;
        padding: 10px;
        border-bottom: 1px solid #ececec;
        font-size: 16px;
        view {
            padding-left: 30px;
            .i-title {
                color: #999;
                display: inline-block;
                width: 80px;
                text-align-last: justify;
                text-align: justify;
                text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
            }
            .note {
                color: #999;
                .more {
                    padding-left: 5px;
                    color: #3388ff;
                    font-size: 13px;
                    cursor: pointer;
                }
            }
            text {
                color: #333;
            }
        }
    }

    .i-c-s-info {
        text-align: center;
        padding: 10px;
        color: #999;
        font-size: 16px;
        text {
            color: red;
        }
    }
}
</style>
